<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动</title>
</head>

<body class="d_f fdcolumn">
    <main class="flex ofScroll" id="mainPage">
        <header class="bfff comHeader">
        </header>
        <div class="rundistance bfff">
            <p class="mb16">目前累计跑步距离:</p>
            <p><span class="c4294FF f40" id="totalDistance">999.99</span>公里 </p>
        </div>
        <div id="runPath" class="prv bfff">
            <div class="runWay d_f jssbetween pabs">
                <h2 class="cfff tcenter">户外跑</h2>
                <h2 class="cfff tcenter">燃脂跑</h2>
                <h2 class="cfff tcenter">跑步机</h2>
            </div>
            <div class="runCount pabs tcenter">GO</div>
            <div id="runMap">
                <div id="allmap"></div>
            </div>
        </div>
        <div id="runRoutes" class="bfff">
            <p>跑步路线</p>
            <div class="d_f mb16 jssbetween">
                <p>使用跑步路线, 邂逅附近的同行者</p><span>&gt;</span>
            </div>
        </div>
    </main>
    <div id="masking" class="jscenter d_f pabs">
        <div id="countDown" class="cfff tcenter">3</div>
    </div>
    <div id="secondMask" class="pabs">
        <p class="cAAD9F7 mb10">户外跑</p>
        <h5 class="cfff d_f jssbetween f20"><span>运动中</span> <span>音乐</span></h5>
        <div class="f100 cfff tcenter runDistance">
            <span id="runDistance">0.00</span>
            <span class="f20">公里</span>
        </div>
        <div class="d_f jssbetween gpsSignal"><span class="cAAD9F7 asc">GPS信号度低, 数据精准度低</span>
            <div class="asc"></div>
            <span class="icon-map iconfont" id="checkMap"></span>
        </div>
        <div class="d_f jssaround mb70">
            <div class="tcenter">
                <span class="d_f fdcolumn  mb16">
                    <span class="iconfont icon-pace mb10"></span>
                    <span class="cAAD9F7">配速</span>
                </span>
                <span class="cfff f20" id="runSpeed">--</span>
            </div>
            <div class="tcenter">
                <span class="d_f fdcolumn  mb16">
                    <span class="iconfont icon-spendtime mb10"></span>
                    <span class="cAAD9F7">用时</span>
                </span>
                <span class="cfff f20" id="showTime">00:00:00</span>
            </div>
            <div class="tcenter ">
                <span class="d_f fdcolumn mb16">
                    <span class="iconfont icon-calorie mb10"></span>
                    <span class="cAAD9F7">千卡</span>
                </span>
                <span class="cfff f20" id="runCalorie">00</span>
            </div>
        </div>

        <div id="suspend" class="tcenter d_f fdcolumn">
            <span class="icon-stop iconfont"></span>
            <span>暂停</span>
        </div>
        <div class="d_f jscenter">
            <div id="conPractic" class="tcenter cfff d_f fdcolumn"><span class="iconfont icon-play mt10"></span>
                <span>继续训练</span>
            </div>
            <div id="endPractice" class="tcenter cfff d_f fdcolumn"><span class="iconfont icon-over mt10"></span>
                <span>结束训练</span>
            </div>
        </div>
    </div>
    <div id="thirdMask" class="pabs">
        <button id="doneBtn" class="pabs tcenter">完成</button>
        <span class="iconfont icon-back pabs zindex1" id="backWards"></span>
        <div class="pabs runData zindex1">
            <p class="c4294FF">户外跑 </p>
            <div class="d_f jssbetween asc mb16">
                <span><span class="f40" id="mapDistance">0.00 </span><span class="f16">公里</span></span>
                <span id="systemTime">2020/11/10</span>
            </div>
            <div class="d_f jssbetween borTop paTop">
                <span class="d_f fdcolumn tcenter">
                    <span id="mapSpeed">14'51"</span>
                    <span>平均配速</span>
                </span>
                <span class="d_f fdcolumn tcenter">
                    <span id="spendTime">00:00:00</span>
                    <span>用时</span>
                </span>
                <span class="d_f fdcolumn tcenter">
                    <span id="mapCalorie"> 00 </span>
                    <span>千卡</span>
                </span>
            </div>
        </div>
        <div id="mapView"></div>
    </div>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=T9y3mvcNfLm8ABDYsnyu0Tg2VQzcSr1y"></script>
</body>

</html>